<swal title="Delete?"
      [text]="'Client claim \'' + claimToDelete?.type + '\' will be deleted permanently. This action cannot be reversed.'"
      type="warning"
      [showCancelButton]="true"
      (confirm)="delete()"
      #deleteAlert>
</swal>
<p class="mt-3"
   *ngIf="!client">
    Loading client claims...
</p>
<form class="needs-validation mt-3"
      *ngIf="client"
      [ngClass]="{ 'was-validated': form.submitted }"
      (ngSubmit)="form.form.valid && update()"
      novalidate
      #form="ngForm">
    <div class="form-group row">
        <label for="client-claims-prefix"
               class="col-sm-2 col-form-label">
            Client Claims Prefix
        </label>
        <div class="col-sm-10">
            <input class="form-control"
                   type="text"
                   id="client-claims-prefix"
                   name="client-claims-prefix"
                   [(ngModel)]="client.clientClaimsPrefix"
                   #clientClaimsPrefix="ngModel" />
        </div>
    </div>
    <div class="form-group row">
        <label for="client-always-send-client-claims"
               class="col-sm-2 col-form-label">
            Always Send Claims
        </label>
        <div class="col-sm-10">
            <div class="form-check col-form-label custom-control custom-checkbox">
                <input class="form-check-input custom-control-input"
                       type="checkbox"
                       id="client-always-send-client-claims"
                       name="client-always-send-client-claims"
                       [(ngModel)]="client.alwaysSendClientClaims"
                       #alwaysSendClientClaims="ngModel" />
                <label class="custom-control-label"
                       for="client-always-send-client-claims">
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div>
            <button type="submit"
                    class="btn btn-primary waves-effect waves-light m-r-5">
                Save Changes
            </button>
        </div>
    </div>
</form>
<hr />
<form class="needs-validation"
      [ngClass]="{ 'was-validated': claimsform.submitted }"
      (ngSubmit)="claimsform.form.valid && addClaim()"
      novalidate
      #claimsform="ngForm">
    <div class="form-row">
        <div class="col">
            <label class="sr-only"
                   for="claim-name">
                Claim
            </label>
            <input class="form-control"
                   id="claim-name"
                   name="claim-name"
                   [(ngModel)]="selectedClaimName"
                   [placeholder]="'Please provide a claim...'"
                   required
                   #claim="ngModel" />
            <div *ngIf="claimsform.submitted && claim.invalid"
                 class="form-control-feedback text-danger">
                Please provider a claim.
            </div>
        </div>
        <div class="col">
            <label class="sr-only"
                   for="claim-value">
                Value
            </label>
            <input class="form-control"
                   id="claim-value"
                   name="claim-value"
                   [(ngModel)]="selectedClaimValue"
                   [placeholder]="'Please provide a value...'"
                   type="text"
                   required
                   #value="ngModel" />
            <div *ngIf="claimsform.submitted && value.invalid"
                 class="form-control-feedback text-danger">
                Please provide a value.
            </div>
        </div>
        <div class="col-md-1 text-right">
            <button type="submit"
                    class="btn btn-primary waves-effect waves-light m-r-5">
                Add
            </button>
        </div>
    </div>
</form>
<div class="row mt-3">
    <div class="col-12">
        <app-list-view [clientSide]="true"
                       [rowsPerPage]="25"
                       [canFilter]="false"
                       [columns]="columns"
                       [rows]="rows"
                       [defaultSortField]="'type'"
                       [defaultSortDirection]="'Asc'"
                       #clientClaimsList>
        </app-list-view>
    </div>
</div>
<ng-template let-row="row"
             let-value="value"
             #actionsTemplate>
    <a class="btn btn-danger waves-effect m-r-5"
       href="javascript:void(0)"
       role="button"
       (click)="showDeleteAlert(row.id)">
        Delete
    </a>
</ng-template>